<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 100px;height:100px;background: red;margin-bottom: 10px;}
        #msg{width:400px;height:300px;border:solid 1px #aaa;}
    </style>
</head>
<body>
    <div id="box"></div>
    <div id="msg"></div>
</body>
<script>

    var box = document.getElementById("box");
    var msg = document.getElementById("msg");

    // box.onclick = function(){}
    // 等价
    // box["on" + "click"] = function(){}
    // 可以扩展成
    // var a = "click";
    // box["on" + a] = function(){}

    eventTest("click", "点击");

    eventTest("dblclick", "双击");

    eventTest("mousedown", "鼠标按下");
    eventTest("mouseup", "鼠标抬起");
    eventTest("mousemove", "鼠标移动");
    eventTest("mouseover", "鼠标进入");
    eventTest("mouseout", "鼠标离开");

    function eventTest(type, str){
        var i = 0;
        box["on" + type] = function(){
            i++;
            msg.innerHTML += str + "了"+ i +"次box<br>";
        }
    }
</script>
</html>